<template>
  <!-- 精选产品 -->
  <div class="hotAct">
    <div class="hotAct_title">
      <div>精选产品</div>
      <div class="lookmore" @click="$router.push({path:'/SelectedProducts'})">查看更多</div>
    </div>
    <div class="boxcontainer">
      <div class="pro">
        <div class="item" :style="probg_1" @click="$router.push({path:'/SelectedProducts'})">
          <div>稳健理财升级</div>
          <div>追求投资性价比</div>
        </div>
        <div class="item" :style="probg_2" @click="$router.push({path:'/SelectedProducts'})">
          <div>稳健理财升级</div>
          <div>追求投资性价比</div>
        </div>
      </div>
      <div class="proList">
        <div
          class="listitem"
          v-for="(item,index) in data"
          :key="'item'+index"
          @click="godetail(item)"
        >
          <div class="itemdetail">
            <p>{{item.productName}}</p>
            <div>{{item.productDesc}}</div>
          </div>
          <div class="itmelilv">
            <p>{{item.interestRate}}</p>
            <p>年利率</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      probg_1: {
        backgroundImage:
          "url(" + require("./../assets/images/homepage/probg_1.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      probg_2: {
        backgroundImage:
          "url(" + require("./../assets/images/homepage/probg_2.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      }
    };
  },
  methods: {
    godetail(item) {
      this.$router.push({
        path: "/ProductDetail",
        query: {
          item: item
        }
      });
    }
  },
  props: ["data"]
};
</script>
<style scoped>
.boxcontainer {
  margin-top: 0.2rem;
}
.hotAct {
  padding: 0.25rem;
  margin-top: 0.2rem;
  background: #fff;
}
.hotAct_title {
  border-left: 4px solid #dbb47f;
  box-sizing: border-box;
  padding-left: 0.2rem;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
      font-size: 0.28rem;
}
.lookmore {
  color: #919191;
  font-size: 0.25rem;
  font-weight: initial;
}

.pro {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}
.pro > div {
  width: 49%;
  height: 1.7rem;
  padding: 0.3rem;
  padding-top: 0.5rem;
  box-sizing: border-box;
}
.item div:nth-child(1) {
  color: #fff;
  font-size: 0.32rem;
  font-weight: bold;
}
.item div:nth-child(2) {
  color: #fbfbfb;
  font-size: 0.27rem;
  margin-top: 0.1rem;
}
.proList {
  width: 100%;
}
.listitem {
  border-bottom: 1px solid #eeeeee;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-block-start: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.itemdetail {
  width: 60%;
}
.itmelilv {
  width: 30%;
  text-align: right;
}
.itemdetail p:nth-child(1) {
  font-size: 0.3rem;
font-weight: normal;
   margin-bottom: 0.08rem;
}
.itemdetail div {
  color: #999999;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分省略号显示*/
  font-size: 0.25rem
}
.itmelilv p:nth-child(1) {
  font-size: 0.35rem;
  font-weight: bold;
  color: #f65247;
  margin-bottom: 0.1rem;
}
.itmelilv p:nth-child(2) {
  color: #999999;
  font-size: 0.25rem;
}
</style>